<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>alter_message</title>
    <link rel="stylesheet" href="./css/public.css">
    <style>
        body{
            background: #F0F3F4;
        }
        .container{
            width: 300px;
            margin: 0 auto;
            padding-top: 150px;
        }
        form{
            padding-top: 15px;
        }
        form>*{
            width: 100%;
        }
        form [type=radio]{
            width: auto;
        }
        #nickname{
            border: 1px solid #c0e6f1;
            line-height: 2em;
            font-size: 16px;
            text-indent: 1em;
            margin-bottom: 15px;
        }
        form select{
            border: 1px solid #c0e6f1;
            height: 32px;
            font-size: 16px;
            text-indent: 1em;
            margin-bottom: 15px;
        }
        form [type=radio]{
            margin: 0 10px 15px;
        }
        form [type=submit]{
            border: 1px solid #c0e6f1;
            line-height: 2em;
            font-size: 16px;
            margin-bottom: 15px;
            color: #fff;
            background: #23B7E5;
        }
        #cancel{
            border: 1px solid #c0e6f1;
            line-height: 2em;
            font-size: 16px;
            margin-bottom: 15px;
            color: #23B7E5;
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="container animation">
        <form action="javascript:" role="form">
            <input type="text" id="nickname" placeholder="请输入昵称">
            <select id="role">
                <option>选择角色</option>
                <option value="" id='unknownRole'>未知角色</option>
            </select>
            <input type="radio" name="gender" id="man" value="1"><label>男</label>
            <input type="radio" name="gender" id="woman" value="0"><label>女</label>
            <select id="authority">
                <option>选择身份</option>
                <option value="0">超级管理员</option>
                <option value="1">普通管理员</option>
                <option value="9">注册会员</option>
                <option value="" id="unknownstatus">未知身份</option>
                <option value="surprise" id="surprise" title="真的没啥用，只是随机一个2-8之间的数，就会渲染一个未知出来">选择这个没有啥用，但你会获得一个狂拽酷炫的随机的身份</option>
            </select>
            <input type="submit" id="submit" value="提交">
            <input type="button" value="取消" id="cancel">
        </form>
    </div>
    <script src="node_modules/axios/dist/axios.js"></script>
    <script>
        axios.get('https://ty.php800.cn/api/token.php',{
            headers:{
                TOKEN:localStorage.getItem('token'),
                SAT:'1234567'
            }
        }).then((res)=>{
            console.log(res)
            if(!res.data.verify){
                top.window.location.href='./login.html'
            }
        })
    </script>
    <script>
        function $(selector){
            return document.querySelector(selector)
        }
        $('#cancel').onclick=function(){
            location.href='./overview_table.html'
        }
        console.log(JSON.parse(localStorage.getItem('alter_message')))
        axios.get('https://ty.php800.cn/api/member/role.php',{
            headers:{
                // TOKEN:localStorage.getItem('token')
                SAT:'1234567'
            }
        }).then((res)=>{
            for(let i=0;i<res.data.role.length;i++){
                let {id,rolename}=res.data.role[i]
                let option=document.createElement('option')
                if(id==JSON.parse(localStorage.getItem('alter_message')).roleid){
                    option.selected='selected '
                }
                option.value=id
                option.innerHTML=rolename
                $('#role').appendChild(option)
            }
        })
        $('#authority').onchange=function(){
            if(this.value=='surprise'){
                $('#surprise').value=Math.floor(Math.random()*7+2)
                this.value=$('#surprise').value
            }
            console.log(this.value)
        }
        function initialize(){
            let {nickname,gender,roleid,authority}=JSON.parse(localStorage.getItem('alter_message'))
            $('#nickname').value=nickname
            if(gender==0){
                $('#woman').checked='checked'
            }else{
                $('#man').checked='checked'
            }
            $('#unknownRole').value=roleid
            $('#unknownstatus').value=authority
        }
        initialize()
        $('#submit').onclick=function(){
            let formdata=new FormData()
            formdata.append('id',JSON.parse(localStorage.getItem('alter_message')).id)
            formdata.append('nickname',$('#nickname').value)
            formdata.append('roleid',$('#role').value)
            formdata.append('authority',$('#authority').value)
            if($('#woman').checked=='checked'){
                formdata.append('gender',$('#woman').value)
            }else{
                formdata.append('gender',$('#man').value)
            }
            // formdata,append('gender',)
            axios.post('https://ty.php800.cn/api/member/useredit.php',formdata,{
                headers:{
                    SAT:'1234567'
                }
            }).then((res)=>{
                console.log(res.data.verify)
                if(res.data.verify){
                    alert('修改密码成功')
                    location.href='./overview_table.html'
                }else(
                    alert('修改密码失败')
                )
            })
        }
    </script>
</body>
</html>